<template>
  <view class="tab-bar">
    <view class="tab-bar-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(item)">
      <view class="tab-bar-icon" :class="{ 'active': currentPath === item.pagePath }">
        <image :src="currentPath === item.pagePath ? item.selectedIconPath : item.iconPath"></image>
      </view>
      <view class="tab-bar-text" :class="{ 'active': currentPath === item.pagePath }">{{ item.text }}</view>
    </view>
    <view class="tab-bar-center" @click="switchTab(centerItem)">
      <view class="center-icon">
        <!-- <image :src="centerItem.iconPath"></image> -->
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { getCurrentInstance } from 'vue';
import Router from '@/router/index.js';

const { proxy } = getCurrentInstance();
const currentPath = ref('');

// 修复：将所有数据定义移至script setup内部
const tabList = [
  {
    name: 'home',
    text: '首页',
    iconPath: '/static/tabbar/home.png',
    selectedIconPath: '/static/tabbar/home-active.png'
  },
  {
    name: 'category',
    text: '分类',
    iconPath: '/static/tabbar/category.png',
    selectedIconPath: '/static/tabbar/category-active.png'
  },
  {
    name: 'mine',
    text: '我的',
    iconPath: '/static/tabbar/mine.png',
    selectedIconPath: '/static/tabbar/mine-active.png'
  }
];

// 新增：正确定义centerItem
const centerItem = {
  name: 'discover',
  iconPath: '/static/tabbar/discover.png'
};

// Route change handler
const handleRouteChange = () => {
  const pages = getCurrentPages();
  currentPath.value = pages[pages.length - 1].route;
};

onMounted(() => {
  handleRouteChange();
  uni.onAppRoute(handleRouteChange);
});

onUnmounted(() => {
  uni.offAppRoute(handleRouteChange);
});

const switchTab = (item) => {
  Router.push({
    name: item.name,
    query: {}
  });
};
</script>

<style scoped>
/* 保持原有样式不变 */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.tab-bar-icon {
  width: 24px;
  height: 24px;
}

.tab-bar-icon image {
  width: 100%;
  height: 100%;
}

.tab-bar-text {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.tab-bar-text.active {
  color: #007AFF;
}

/* 中间凸起按钮 */
.tab-bar-center {
  position: absolute;
  top: -20px;
  width: 50px;
  height: 50px;
}

.center-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #FF4D4F;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(255, 77, 79, 0.5);
}

.center-icon image {
  width: 30px;
  height: 30px;
}
</style>
const tabList = [
  {
    name: 'home', // 对应router中定义的name
    text: '首页',
    iconPath: '/static/tabbar/home.png',
    selectedIconPath: '/static/tabbar/home-active.png'
  },
  {
    name: 'category', // 对应router中定义的name
    text: '分类',
    iconPath: '/static/tabbar/category.png',
    selectedIconPath: '/static/tabbar/category-active.png'
  },
  {
    name: 'mine', // 对应router中定义的name
    text: '我的',
    iconPath: '/static/tabbar/mine.png',
    selectedIconPath: '/static/tabbar/mine-active.png'
  }
]

const centerItem = {
  name: 'discover', // 对应router中定义的name
  iconPath: '/static/tabbar/discover.png'
}